<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>css3样式</title>
		<style type="text/css">
			.divStyle {
				width: 30px;
				height: 30px;
				background-color: red;
				position: relative;
				left: 0px;
			}
			
			input:checked {
				margin-left: 50px;
			}
			
			/*通过checked状态和非checked状态控制第三个元素，需要对两种状态分别进行样式渲染，
			 * 同时还需要保证触发控件具有两个状态进行对应
			 * 不能使用单选框，因为单选框就一种状态**/
			/*非选中状态下的样式**/
			input[type="checkbox"]:checked~ .divStyle {
				position: relative;
				left: 30px;
				/*background-color: navajowhite;*/
			}
			/*选中状态下的样式**/
			input[type="checkbox"]:checked .divStyle {
				position: relative;
				left: 0px;
				/*background-color: navajowhite;*/
			}
			#liner {
				border: 1px dashed yellow;
				width: 300px;
				height: 30px;
				/* 标准的语法 */
				background: linear-gradient(to right, red, yellow, blue);
				/* Safari 5.1 - 6.0 */
				background: -webkit-linear-gradient( left, red, yellow, blue);
				/* Opera 11.1 - 12.0 */
				background: -o-linear-gradient(right, red, yellow, blue);
				/* Firefox 3.6 - 15 */
				background: -moz-linear-gradient(to right, red, yellow, blue);
			}
			
			#circle {
				width: 500px;
				height: 500px;
				/* 标准的语法 */
				background: radial-gradient(red, yellow, blue);
				/* Safari 5.1 - 6.0 */
				background: -webkit-radial-gradient(red, yellow, blue);
				/* Opera 11.1 - 12.0 */
				background: -o-radial-gradient(red, yellow, blue);
				/* Firefox 3.6 - 15 */
				background: -moz-radial-gradient(30% 30%, closest-side, red, yellow, blue, red, yellow, blue);
			}
			
			body {
				background: -webkit-linear-gradient(left, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
				/* Safari 5.1 - 6 */
				background: -o-linear-gradient(right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
				/* Opera 11.1 - 12*/
				background: -moz-linear-gradient(right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
				/* Firefox 3.6 - 15*/
				background: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
				/* 标准的语法 */
			}
		</style>
	</head>

	<body>
		<div style="width:733px; border: 1px solid #666; padding:5px;">
			<form method="post" action="">
				<input type="checkbox" name="css3" />
				<input type="radio" name="css4" />
				<input type="radio" name="css4" />
				<div id="mydiv" class="divStyle">

				</div>
			</form>

			<div id="liner">

			</div>
		</div>

		<div id="circle">

		</div>
	</body>

</html>